import React, {Component} from 'react'
import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native'
import actions from "../../../redux/action";
import {connect} from "react-redux";

class ClassInteractionComponent extends Component {
  componentDidMount() {
    const {fetchClassInteractions} = this.props;
    let formData = new FormData();
    formData.append('studentId', 121);
    console.log(formData)
    fetchClassInteractions(formData)
  }
  classInteraction(data){
    let classInteractions = [
      {
        img: '../../../assets/imgs/video.png',
        title: '神秘的婆罗多——印度之夜俱乐部活动精彩回顾',
      },
      {
        img: '../../../assets/imgs/video.png',
        title: '神秘的婆罗多——印度之夜俱乐部活动精彩回顾',
      },
      {
        img: '../../../assets/imgs/video.png',
        title: '神秘的婆罗多——印度之夜俱乐部活动精彩回顾',
      },
      {
        img: '../../../assets/imgs/video.png',
        title: '神秘的婆罗多——印度之夜俱乐部活动精彩回顾',
      },
    ];
    if(data){
      console.log(data)
      classInteractions = data;
    }
    let classInteraction = <View style={styles.classInteractionContainer}>
      <View style={MinaStyle.minaTitle}>
        <Text style={MinaStyle.minaTitleLeft}>课堂互动</Text>
      </View>
      <View style={styles.classInteractionMain}>
        {classInteractions.map((item, index) => {
          return(
            <View style={styles.classInteractionItem}  key={index}>
              <Image
                style={styles.classInteractionImg}
                source={require('../../../assets/imgs/video.png')}
              />
              <Text ellipsizeMode="tail" numberOfLines={1} style={styles.classInteractionTitle}>{item.title}</Text>
            </View>
          )
        })}
      </View>
    </View>
    return classInteraction;
  }
  render() {
    const {classInteraction} = this.props;
    console.log(classInteraction)
    return (
      this.classInteraction(classInteraction)
    )
  }
}

const mapStateToProps = state => ({
  classInteraction: state.home.classInteraction,
});
const mapDispatchToProps = dispatch => ({
  fetchClassInteractions: (params) => dispatch(actions.fetchClassInteractions(params))
});
export default connect(mapStateToProps, mapDispatchToProps)(ClassInteractionComponent);

const styles = StyleSheet.create({
  classInteractionContainer: {

  },
  classInteractionMain: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
  },
  classInteractionItem: {
    width: '48.5%',
    marginBottom: 8,
  },
  classInteractionImg: {
    width: '100%',
    height: 95,
    borderRadius: 5,
  },
  classInteractionTitle: {
    color: '#333',
    marginTop: 8,
    fontSize: 14,
  },
})